<template>
    <textarea ref="query"></textarea>
</template>
<script setup>
import { CodeMirror } from '../../libs/CodeMirror'
import { nextTick, ref, watch } from 'vue'
const query = ref(null);



var Textarea = null;

nextTick(() => {
    Textarea = CodeMirror.fromTextArea(query.value, {
        mode: 'text/javascript',
        indentWithTabs: true,
        smartIndent: false,
        lineNumbers: true,
        lineWrapping: true,
        foldGutter: true,
        matchBrackets: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        theme: 'mdn-like',
    });
    Textarea.on('beforeChange', (instance, changeObj) => {
        if (changeObj.origin == '+input' && (changeObj.text == '\'' || changeObj.text == '\"')) {
            var _str = Textarea.getSelection();
            if (_str.toString().length > 0) {
                Textarea.replaceSelection(_str + _str + changeObj.text);
            };
        };
    });
    Textarea.setValue('{}');
});

const props = defineProps(['activeKey'])
watch(() => props.activeKey, (val) => {
    if (val == 'header') {
        setTimeout(() => {
            Textarea.refresh();
        }, 10)
    }
})


const getValue = () => Textarea.getValue();

defineExpose({
    getValue
})


</script>
<style lang="less" scoped>

</style>